<template>
	<div class="commentBox">
		<div class="leftimg">
			<router-link :to="{name:'persondetails'}" @click.native="clicktouxiang(info[index].id)">
				<img class="headimg" :src="info[index].headimg"/>
			</router-link>
		</div>
		<div class="rightpart">
			<div>
				<div class="username">{{info[index].username}}</div>
				<span class="time">{{info[index].time}}</span>
				<span class="address">{{info[index].address}}</span>
				<div class="likes" @click="likeEvent">
					<img v-if="likes" src="../../../assets/images/circle/23/zan_btn_normal.png" alt="" />
					<img v-if="!likes" src="../../../assets/images/circle/23/zan_btn_selected.png" alt="" />
					<span class="likescount">{{info[index].likescount}}</span>
				</div>
			</div>
			<router-link :to="{name:'circleMainBody',params:{id:info[index].id}}" @click.native="clicktext(info[index].id)">
				<div class="commenttext">{{info[index].commenttext}}</div>
			</router-link>
			<div class="commentimg">
				<span v-for="every in info[index].commentimg">
					<img :src="every" alt=""/>
				</span>
			</div>
			<div v-if='routeName=="circleComment"||"persondetails"'>
				<div class="moreBtn" @click="more">
					<img src="../../../assets/images/circle/23/more_btn_normal.png" alt="" />
				</div>
				<div class="moreShow" v-if="flag">
					<span class="cai" @click="caiEvent">
						<img v-if="cai" src="../../../assets/images/circle/23/t.png" alt="" />
						<img v-if="!cai" src="../../../assets/images/circle/23/t.png" alt="" />
						<span>踩(</span>
					<span>{{info[index].cai}}</span>
					<span>)</span>
					</span>
					<span class="share" @click="dialogVisible = true">
						<img src="../../../assets/images/circle/23/t1.png" alt="" />
						<span>评论</span>
					</span>
					<span class="discuss" @click="share">
					<img src="../../../assets/images/circle/23/t2.png" alt="" />
						<span>分享</span>
					</span>
				</div>
			</div>
			<div v-else-if='routeName=="circleMainBody"'>
				<div class="delBtn" @click="del">删除此文</div>
				<div class="shareBtn" @click="share">
					<img src="../../../assets/images/circle/25/f-1.png" alt="" /> 分享
				</div>
			</div>
		</div>
		<el-dialog title="评论" :visible.sync="dialogVisible">
			<el-input v-model="input" placeholder="留下评论再走吧..."></el-input>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="quxiao">取 消</el-button>
			    <el-button type="primary" @click="confirm">确 定</el-button>
			  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				dialogVisible: false,
				input: '',
				likes:true,
				cai:true
			}
		},
		methods: {
			more() {
				this.flag = !this.flag
			},
			likeEvent() {
				if(this.likes){
					this.info[this.index].likescount++;
				}else{
					this.$message('您已经点过赞了!');
				}
				this.likes=false;
			},
			caiEvent() {
				if(this.cai){
					this.info[this.index].cai++;
				}else{
					this.$message('您已经踩过了!');
					this.flag = !this.flag
				}
				this.cai=false;
			},
			share() {
				this.$message('分享成功');
				this.flag = !this.flag
			},
			confirm(){
				this.dialogVisible = false;
				this.$message('评论成功');
				this.flag = !this.flag
			},
			quxiao(){
				this.dialogVisible = false;
				this.$message('取消评论');
				this.flag = !this.flag
			},
			del() {
				{
					this.$confirm('确认要删除此文?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			clicktext(index){
				//把点击的id存到本地缓存中,不知道为什么created()中当前id总是最后一个
				localStorage.setItem('commentid',index);
			},
			clicktouxiang(index){
				localStorage.setItem('commentidimg',index);
			}
		},
		//接收父组件传递过来的数据
		props: [
			'info',
			'index',
			'routeName'
		]
//		props: {
//			info:{
//				 default:[
//					 {
//					 	username:"哈哈"
//					 },
//					 {
//					 	username:"哈哈"
//					 },
//					 {
//					 	username:"哈哈"
//					 }
//				]
//			},
//			index:{
//				 default:0
//			},
//			routeName:{
//				 default:'ff'
//			}
//		}			
	}
</script>

<style scoped lang="less">
	@current: 100rem;
	.commentBox {
		padding: 20/@current 40/@current 20/@current 40/@current;
		/*background: #F2EEF9;*/
		position: relative;
		border-bottom: 1/@current solid #DED9E6;
		height: 452/@current;
		.leftimg {
			width: 60/@current;
			height: 60/@current;
			position: absolute;
			top: -20/@current;
			margin-right: 20/@current;
			.headimg {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.rightpart {
			position: absolute;
			right: 40/@current;
			width: 75%;
			/*width: 510/@current;*/
			height: 50/@current;
			font-size: 24/@current;
			.username {
				color: #b676eb;
				font-size: 28/@current;
				margin-bottom: 8/@current;
			}
			.time {
				color: #959595;
				margin-right: 20/@current ;
			}
			.address {
				color: #959595;
			}
			.likes {
				position: absolute;
				right: 0/@current;
				top: 15/@current;
				width: 95/@current;
				img {
					width: 35/@current;
					margin-right: 8/@current;
				}
				.likescount {
					width: 50/@current ;
					color: #959595;
					position: absolute;
					top: 0/@current;
					font-size: 24/@current;
				}
			}
			.commenttext {
				margin-top: 28/@current;
				margin-bottom: 22/@current;
				font-size: 30/@current;
				color: #313131;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}
			.commentimg {
				span {
					width: 143/@current;
					height: 143/@current;
					margin-right: 18/@current;
					img {
						width: 143/@current;
						height: 143/@current;
					}
				}
				span:last-child {
					margin-right: 0;
				}
			}
			.moreBtn {
				width: 70/@current;
				height: 35/@current;
				margin: 20/@current 0;
				float: right;
				img {
					width: 100%;
					height: 35/@current;
				}
			}
			.delBtn {
				float: left;
				color: #B676EB;
				font-size: 24/@current;
				width: 110/@current;
				height: 35/@current;
				margin: 20/@current 0;
			}
			.shareBtn {
				width: 110/@current;
				height: 35/@current;
				margin: 20/@current 0;
				float: right;
				color: #B676EB;
				font-size: 24/@current;
				img {
					width: 35%;
					height: 35/@current;
					vertical-align: bottom;
					margin-right: 10/@current;
				}
			}
			.moreShow {
				position: absolute;
				left: -72/@current;
				height: 75/@current;
				width: 100%;
				border-radius: 10/@current;
				background: url('../../../assets/images/circle/23/bg.png') 100% 100% no-repeat;
				padding: 9/@current;
				box-sizing: border-box;
				position: relative;
				span {
					display: inline-block;
					height: 57/@current;
					border-radius: 9/@current;
					font-size: 26/@current;
					color: white;
					line-height: 57/@current;
					text-align: center;
					img {
						width: 30/@current ;
						vertical-align: middle;
						margin-right: 6/@current;
					}
				}
				.cai {
					position: absolute;
					top: 9/@current;
					width: 171/@current;
					background: url('../../../assets/images/circle/23/tc1-1.png') 100% 100% no-repeat;
				}
				.share {
					position: absolute;
					top: 9/@current;
					left: 188/@current;
					width: 138/@current;
					background: url('../../../assets/images/circle/23/tc1-1.png') 100% 100% no-repeat;
				}
				.discuss {
					position: absolute;
					top: 9/@current;
					left: 333/@current;
					width: 138/@current;
					background: url('../../../assets/images/circle/23/tc1-1.png') 100% 100% no-repeat;
				}
			}
		}
	}
	
</style>
<style>
	.el-message-box__wrapper{
		width: 200px;
		margin: 0 auto;
	}
	.el-message-box__wrapper .el-message-box{
		width: 200px;
	}
</style>